/*
 * @Description: 人口统计
 * @Author: kanglin
 * @Date: 2018-10-30 08:42:26
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >
    .v-com-population-statistics, .card{
            height: 1032px;
            background: #ffffff;
            border-radius:10px;
             .card__title {
            padding-left: 50px;
            height:76px;
            font-size:24px;
            font-weight:600;
            line-height:76px;
            color:rgba(51,51,51,1);
        }
        .card__title__icon{
            display: inline-block;
            height: 28px;
            width: 28px;
            vertical-align: -.9em;
            &>img{
                width: 100%;
                vertical-align: top;
            }
        }

        .card__content{
            padding-left: 50px;
            padding-right: 50px;
        }
    }
    .user{
        position: relative;
        height: 320px;
        margin: 0 50px;
    }
    .user__age{
        position: absolute;
        left: 0;
        top: 0;
    }
    .user__gender{
        position: absolute;
        right: 0;
        top: 0;
    }
    .location{
        height: 542px;
    }
</style>

<template>
	<div class="card v-com-population-statistics">
		<div class="card__title">
			<i class="card__title__icon"><img
				src="//gz.bcebos.com/v1/beauty-mirror/web_admin/admin-home/icon_Crowd@2x.png"
				alt=""></i>
			使用人群
		</div>
		<div class="card__content user">
			<div class="user__age">
				<age-charts
					v-if="getAgeGroups.length >1"
					:age-groups="getAgeGroups"/>
				<empty-chart
					v-else
					title="暂无数据"/>
			</div>
			<div class="user__gender">
				<gender-charts
					v-if="genders.length>1"
					:genders="genders"/>
				<empty-chart
					v-else
					title="暂无数据"/>
			</div>
		</div>

		<div class="card__title">
			<i class="card__title__icon"><img
				src="//gz.bcebos.com/v1/beauty-mirror/web_admin/admin-home/组 10@2x.png"
				alt=""></i>
			地域分布
		</div>
		<div class="card__content location">
			<echart-map
				:area-data="getRegions"/>
		</div>
	</div>
</template>

<script>
// import empty from 'src/views/component/empty';
import emptyChart from 'src/views/component/empty-chart';
import echartMap from 'src/views/component/panx-home/echart-map';
import ageCharts from './age-charts';
import genderCharts from './gender-charts';

export default {
	name: 'PopulationStatistics',
	components: {
		ageCharts,
		genderCharts,
		echartMap,
		emptyChart,
	},
	props: {
		genders: {
			type: Array,
			default() {
				return [];
			},
		},
		ageGroups: {
			type: Array,
			default() {
				return [];
			},
		},
		regions: {
			type: Array,
			default() {
				return [];
			},
		},
		userTotal: {
			type: Number,
			default() {
				return 0;
			},
		},
	},
	data() {
		return {};
	},
	computed: {
		getAgeGroups() {
			return this.ageGroups;
		},
		getRegions() {
			return this.regions.map(item => ({
				name: item.province,
				value: item.count,
				selected: false,
				percent: this.userTotal > 0 ? `${Number((item.count / this.userTotal) * 100).toFixed(2)}%` : '0%',
			}));
		},
	},
	methods: {

	},
};
</script>

